<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        p{
            height: 30px;
        }
        ul{
            height: 30px;
            border: 1px solid #ddd;
        }
        ul,li{
            line-height: 30px;
            height: 30px;
            float: left;
            padding: 0 20px;
            border-right: 1px solid #ddd;
        }
        div{
            text-align: center;
            background:red;
            height: 30px;
        }
    </style>
</head>
<body>
    <p>选择一个过时的框架，则大部分的人都会不满。这点“小事”，也足够让你几天几夜睡不了一个好觉，选择一个过时的框架，则大部分的人都会不满。这点“小事”，也足够让你几天几夜睡不了一个好觉</p>
    <p>
        思路：
            1、
    </p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div id="navbar">
        <ul>
            <li>主页</li>
            <li>地址</li>
            <li>促销</li>
            <li>评价</li>
        </ul>
    </div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div id="index">
        首页
    </div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div id="address">
        地址
    </div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div id="sale">
        促销
    </div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div id="remark">
        评价
    </div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <script>
        //获取四个关键点
        var indextarg = document.getElementById('index').offsetTop;
        var addresstarg = document.getElementById('address').offsetTop;
        var saletarg = document.getElementById('sale').offsetTop;
        var remarktarg = document.getElementById('remark').offsetTop;

        var navbar = document.getElementById('navbar');
        var target = navbar.offsetTop;//决定是否要改变position设置的位置值


        window.onscroll = function() {

            var currentTop = document.body.scrollTop || document.documentElement.scrollTop;

            // console.log("当前被卷起来："+currentTop);
            // console.log("目标navbar在："+target);

            if(currentTop >= target){
                //一旦把这个热点内容卷起来（把它隐藏起来了）
                //需要把这个navbar从标准文档流中提出来，使用固定定位fixed
                navbar.style.position = "fixed";
                navbar.style.top = "0px";
            } else {
                //没有被卷起来，就是默认定位方式
                navbar.style.position = "static";
            }

            if(currentTop > indextarg && currentTop < addresstarg) {
                console.info("主页高亮显示");
                higlight(0);
            }
            if(currentTop > addresstarg && currentTop < saletarg) {
                console.info("地址高亮显示");
                higlight(1);
            }
            if(currentTop > saletarg && currentTop < remarktarg) {
                console.info("促销高亮显示");
                higlight(2);
            }
            if(currentTop > remarktarg) {
                console.info("评价高亮显示");
                higlight(3);
            }
        }

        function higlight(index) {
            var lis = navbar.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++) {
                lis[i].style.background = "red";
            }
            navbar.getElementsByTagName("li")[index].style.background = "blue";
        }
    </script>
</body>
</html>

















